<template>
  <div>
    <div class="top-1"><my-header-1></my-header-1></div>
    <div class="top-2"><my-header-2></my-header-2></div>

    <div class="tab">
      <div style="width:70px;margin-left: .2667rem;text-align: start;">
        <router-link to="/city">{{ cityObj.name }}</router-link>
      </div>
      <!-- <li>
        <router-link :to="item.path">{{ item.name }}</router-link>
      </li> -->
      <div class="tab_3">
        <p>
          <router-link to="/home/reying"> 热映</router-link>
        </p>
        <p>
          <router-link to="/home/yingyuan">影院</router-link>
        </p>
        <p>
          <router-link to="/home/daiying">待映</router-link>
        </p>
        <p>
          <router-link to="/home/jingdian">经典电影</router-link>
        </p>
      </div>
      <div>
        <img src="../../assets/img/search-red.png" alt="" />
      </div>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
import MyHeader1 from "../../components/MyHeader1.vue";
import MyHeader2 from "../../components/MyHeader2.vue";

import { mapState } from "vuex";

export default {
  name: "MovieView",
  components: {
    MyHeader1,
    MyHeader2,
  },
  computed: {
    ...mapState(["cityObj"]),
  },
};
</script>

<style lang="less" scoped>

ul,
li {
  list-style: none;
}
.top-1 {
  position: fixed;
  top: 0;
  z-index: 3;
  width: 100%;
}
.top-2 {
  position: fixed;
  top: 50px;
  z-index: 2;
  width: 100%;
}
.tab {
  width: 100%;
  height: 1.173333rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.4rem;
  align-items: center;
  border-bottom: 1px solid rgb(232, 232, 232);
  background: #fff;
  position: fixed;
  top: 111px;
  z-index: 2;
}

.tab div:nth-child(2n-1) {
  width: 1.333333rem;
  color: #666;
  text-align: center;
}

.tab div:nth-child(2) {
  width: 6.4rem;
  height: 45px;
  line-height: 45px;
  color: #666;
  text-align: center;
  display: flex;
  justify-content: space-around;
  font-weight: 600;
}

.tab div:nth-child(3) img {
  width: 0.533333rem;
  height: 0.533333rem;
  vertical-align: middle;
}
.tab_3 a {
  font-size: .4rem;
  font-weight: 500;
  color: #333;
  display: inline-block;
  position: relative;
  display: block;
}
.tab_3 a.router-link-active {
  font-weight: 700;
  font-size: .4533rem;
  color: #f03d37;
}
.tab_3 a.router-link-active::after {
  content: "";
  display: inline-block;
  width: 60%;
  height: 0.08rem;
  background: #f03d37;
  position: absolute;
  left: 25%;
  bottom: 0rem;
  font-weight: 700;
  color: #f03d37;
  border-radius: 0.08rem;
}
/* a.router-link-exact-active {
        color: #f03d37;
      } */
      a{
        color: #696969;
      }
</style>